<style scoped>
</style>
<template>
  <div>
    <Form ref="myForm" :model="formData"  :rules="ruleInline" :label-width="120">
      <FormItem label="批次名称">
        <Input type="text" v-model="formData.batchName" />
      </FormItem>
      <FormItem label="批次">
        <Input type="text" disabled v-model="formData.batch" />
      </FormItem>


      <FormItem prop="sourceDbId" label="来源数据库">
        <Select v-model="formData.sourceDbId" filterable>
          <Option
            v-for="item in this.databaseList"
            :key="item.dbId"
            :value="item.dbId"
          >{{ item.dbSysname }}</Option>
        </Select>
      </FormItem>

      <FormItem prop="targetDbId" label="目标数据库">
        <Select v-model="formData.targetDbId" filterable>
          <Option
            v-for="item in this.databaseList"
            :key="item.dbId"
            :value="item.dbId"
          >{{ item.dbSysname }}</Option>
        </Select>
      </FormItem>

      <FormItem prop="taskType" label="定时类型">
        <Select v-model="formData.taskType" @on-change="clearVal">
          <Option
            v-for="item in this.selectArr"
            :key="item.index"
            :value="item.value"
          >{{ item.name }}</Option>
        </Select>
      </FormItem>
      <FormItem v-if="this.formData.taskType===1" prop="taskVal" label="小时间隔">
        <RadioGroup v-model="formData.taskVal">
          <Radio v-for="item in this.hours" :key="item.index" :label="item"></Radio>
        </RadioGroup>
      </FormItem>
      <FormItem v-if="this.formData.taskType===2" prop="taskVal" label="分钟间隔">
        <RadioGroup v-model="formData.taskVal">
          <Radio v-for="item in this.minutes" :key="item.index" :label="item"></Radio>
        </RadioGroup>
      </FormItem>
      <FormItem v-if="this.formData.taskType===0" prop="taskVal" label="执行时间">
        <TimePicker
          v-model="formData.taskVal"
          :steps="[1, 15, 30]"
          type="time"
          placeholder="Select time"
          style="width: 168px"
        ></TimePicker>
      </FormItem>
      <FormItem>
        <Button type="success" @click="updateBatch('myForm')">保存</Button>
      </FormItem>
    </Form>
    <Spin fix v-show="addLoading"></Spin>
  </div>
</template>
<script>
import moment from "moment";
export default {
  name: "Update",
  props: {
    menuTheme: String,
    selected: Object
  },
  data() {
    return {
      hours: [1, 2, 4, 6, 8, 10, 12],
      minutes: [ 1, 5, 15, 30],
      selectArr: [
        { value: 0, name: "固定时间执行" },
        { value: 1, name: "按小时隔执行" },
        { value: 2, name: "按分间隔执行" }
      ],
      addLoading: false,
      databaseList:[],
      formData: {
        batch: this.selected.batch,
        batchName: this.selected.batchName,
        sourceDbId: this.selected.sourceDbId,
        targetDbId: this.selected.targetDbId,
        taskType: this.selected.taskType,
        taskVal: this.selected.taskVal
      },
      ruleInline: {
        sourceDbId: [
          {
            type: 'number',
            required: true,
            message: "来源数据库不能为空",
            trigger: "blur"
          }
        ],
        targetDbId: [
          {
            type: 'number',
            required: true,
            message: "目标数据库不能为空",
            trigger: "blur"
          }
        ]

      }

    };
  },
  methods: {
    clearVal(e) {
      if (e === 0) {
        this.formData.taskVal = "00:15:00";
      }
    },
    updateBatch(name) {
      this.$refs[name].validate(async valid => {
        if (valid) {
          this.addLoading = true;
          const result = await this.$api.updateBatch(this.formData);
          this.addLoading = false;
          if (result.code === 1) {
            this.$Message.success("保存成功!");
            this.$emit('fun')
          } else {
            this.$Message.error(result.errMsg);
          }
        }
      });
    },
      //获取数据库列表
      async getEtlDBList(pages) {
        const sizes = 200;
        const data = {
          pages:1,
          sizes:200
        };
        const result = await this.$api.getEtlDBList(data);
        this.loading = false;
        if (result.code === 1) {
          this.databaseList = result.data.list;
          
          console.log("获取数据库列表");
          console.log(this.databaseList);
        }
      }


  },
  mounted() {
    this.getEtlDBList();
  }


};
</script>